<template>
  <div>
    <!--    <el-form-->
    <!--      ref="ruleFormRef"-->
    <!--      label-width="100px"-->
    <!--      :model="searchParams"-->
    <!--      style="padding: 16px 16px 0 16px"-->
    <!--      :inline="true"-->
    <!--    >-->
    <BaseForm
      ref="searchForm"
      type="search"
      v-model:items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
      labelWidth="120px"
    >
      <el-form-item label="微信群名称">
        <el-input style="width: 180px" v-model="searchParams.wxGroupName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="供电单位">
        <selectPage
          style="width: 180px"
          :item="powerItem"
          v-model="searchParams.powerId"
          @update:modelValue="changePower"
        />
      </el-form-item>
      <el-form-item label="供电线路">
        <selectPage
          :item="lineItem"
          v-model="searchParams.lineId"
          :search="searchParams.lineSearch"
          @update:modelValue="changeLine"
        />
      </el-form-item>
      <el-form-item label="台区">
        <selectPage
          :item="areaItem"
          v-model="searchParams.areaId"
          :search="searchParams.areaSearch"
          @update:modelValue="changeArea"
        />
      </el-form-item>
      <el-form-item label="片区/村社">
        <selectPage
          :item="communityItem"
          ref="CommunityRef"
          v-model="searchParams.communityId"
          :search="searchParams.communitySearch"
        />
        <!--        <el-select style="width: 180px" v-model="searchParams.communityId" filterable placeholder="请选择" clearable>-->
        <!--          <el-option v-for="item in communityList" :key="item.value" :value="item.value" :label="item.label">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
      </el-form-item>
      <el-form-item label="关联网格经理">
        <el-select style="width: 180px" v-model="searchParams.griManagerId" filterable placeholder="请选择" clearable>
          <el-option v-for="item in optionsMange" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="消息发送时间">
        <el-date-picker
          style="width: 250px"
          v-model="searchParams.recordTime"
          type="datetimerange"
          range-separator="~"
          value-format="YYYY-MM-DD HH:ss:mm"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="是否预警">
        <el-select style="width: 180px" v-model="searchParams.isWarn" filterable placeholder="请选择" clearable>
          <el-option v-for="item in warnOptionList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预警类型">
        <el-select style="width: 180px" v-model="searchParams.warnTypeId" filterable placeholder="请选择" clearable>
          <el-option v-for="item in warnTypeList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否生成工单">
        <el-select style="width: 180px" v-model="searchParams.isWorkOrder" filterable placeholder="请选择" clearable>
          <el-option v-for="item in warnOptionList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否回复已处理" label-width="120">
        <el-select style="width: 180px" v-model="searchParams.isBackDeal" filterable placeholder="请选择" clearable>
          <el-option v-for="item in warnOptionList" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item>-->
      <!--        <slot name="prefix-button" />-->
      <!--        <el-button type="primary" @click="handleSearch">-->
      <!--          <el-icon>-->
      <!--            <Search />-->
      <!--          </el-icon>-->
      <!--          查询-->
      <!--        </el-button>-->
      <!--        <el-button @click="resetForm">-->
      <!--          <el-icon>-->
      <!--            <RefreshLeft />-->
      <!--          </el-icon>-->
      <!--          重置-->
      <!--        </el-button>-->
      <!--        <slot name="suffix-button" />-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListRobotReply"
      :searchParams="searchParams"
      :down="true"
      :downLoad="downLoad"
      :serial="false"
    >
      <el-table-column prop="groupId" label="微信群ID" fixed="left" />
      <el-table-column prop="wxGroupName" label="微信群名称" fixed />
      <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="lineNames" label="供电线路" show-overflow-tooltip></el-table-column>
      <el-table-column prop="areaNames" label="台区" show-overflow-tooltip></el-table-column>
      <el-table-column prop="communityNames" label="关联片区/村社" show-overflow-tooltip></el-table-column>
      <el-table-column prop="managerNames" label="关联网格经理" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sendUserName" label="客户昵称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sendUserId" label="客户微信ID" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sendUserWxCode" label="客户微信号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="recordTime" label="消息发送时间" fixed="right" width="180" />
      <el-table-column prop="recordContent" label="消息内容" fixed="right" width="180" show-overflow-tooltip />
      <el-table-column prop="replyRecordTime" label="是否预警" fixed="right" width="100">
        <template #default="scope">
          <el-text v-if="scope.row.isWarn === 1">是</el-text>
          <el-text v-if="scope.row.isWarn === 0">否</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="warnTypeList" label="预警类型" fixed="right" width="80">
        <template #default="scope">
          <el-text>{{ scope.row.warnTypeList ? scope.row.warnTypeList.join(',') : '' }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="notReplyReason" label="是否生成工单" fixed="right" width="80">
        <template #default="scope">
          <el-text v-if="scope.row.isWorkOrder === 1">是</el-text>
          <el-text v-if="scope.row.isWorkOrder === 0">否</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="notReplyReason" label="是否回复已处理" fixed="right" width="100">
        <template #default="scope">
          <el-text v-if="scope.row.isBackDeal === 1">是</el-text>
          <el-text v-if="scope.row.isBackDeal === 0">否</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="notReplyReason" label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-text type="primary" @click.prevent.stop="handleShowList(scope.row)">查看回复内容</el-text>
        </template>
      </el-table-column>
    </BaseTable>
    <el-dialog title="回复内容" width="1000" v-model="state.visible">
      <el-table :data="state.dataSource" row-key="replayId" :max-height="300">
        <el-table-column label="网格经理姓名" prop="managerName"></el-table-column>
        <el-table-column label="虚拟号码" prop="virtualNumber"></el-table-column>
        <el-table-column label="微信昵称" prop="nickName"></el-table-column>
        <el-table-column label="回复时间" prop="replyTime"></el-table-column>
        <el-table-column label="回复内容" prop="replyContent" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- <BaseTable ref="modalTable" :getTableDataFn="basicConfigService.getRobotReply" :searchParams="state.modalParams">
        <el-table-column label="网格经理姓名"></el-table-column>
        <el-table-column label="虚拟号码"></el-table-column>
        <el-table-column label="微信昵称"></el-table-column>
        <el-table-column label="回复时间"></el-table-column>
        <el-table-column label="回复内容" show-overflow-tooltip></el-table-column>
      </BaseTable> -->
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, reactive } from 'vue';
import { basicConfigService } from '@/api/basicConfig';
import dayjs from 'dayjs';
import { startCase } from 'lodash';

// const recordTime = ref([]);

const state = reactive({
  visible: false,
  dataSource: [],
  modalParams: {
    managerWxId: '',
    recordTimeBegin: null,
    recordTimeEnd: null,
  },
});

const formItems = ref([
  // {
  //   name: '片区/村社',
  //   key: 'communityId',
  //   clearable: true,
  //   type: 'input',
  // },
]);
const searchParams = ref({
  wxGroupName: '',
  lineId: '',
  powerId: '',
  areaId: '',
  communityId: '',
  griManagerId: '',
  isWarn: '', // 是否预警
  warnTypeId: '', // 预警类型
  isWorkOrder: '', // 是否生成工单
  isBackDeal: '', // 是否已回复处理
  recordTimeBegin: null, // 消息发送开始时间
  recordTimeEnd: null, // 消息发送结束时间
  isNeedManagerReplay: 1,

  recordTime: [],

  //临时变量
  lineSearch: {
    powerId: '',
  },
  areaSearch: {
    powerId: '',
    lineId: '',
  },
  communitySearch: {
    powerId: '',
    lineId: '',
    areaId: '',
  },
});

watch(
  () => searchParams.value.recordTime,
  (newVal) => {
    if (newVal) {
      searchParams.value.recordTimeBegin = newVal[0] ? newVal[0] : null;
      searchParams.value.recordTimeEnd = newVal[0] ? newVal[1] : null;

      // searchParams.value.recordTimeBegin = newVal[0] ? dayjs(newVal[0]).format() : null;
      // searchParams.value.recordTimeEnd = newVal[0] ? dayjs(newVal[1]).format() : null;
    } else {
      searchParams.value.recordTimeBegin = null;
      searchParams.value.recordTimeEnd = null;
    }
  },
);
watch(
  () => state.visible,
  (newVal) => {
    if (newVal) {
      // getModalList();
    } else {
      // state.modalParams.managerWxId = '';
      // state.modalParams.recordTimeBegin = null;
      // state.modalParams.recordTimeEnd = null;
      state.dataSource = [];
    }
  },
);
const warnOptionList = ref([
  {
    label: '否',
    value: 0,
  },
  {
    label: '是',
    value: 1,
  },
]);
const warnTypeList = ref([
  {
    label: '舆情',
    value: 1,
  },
  {
    label: '未知诉求',
    value: 3,
  },
  {
    label: '停电诉求',
    value: 4,
  },
]);

const optionsResions = ref([
  {
    label: '未开启自动回复',
    value: 1,
  },
  {
    label: '未开启未知诉求回复',
    value: 2,
  },
  {
    label: '回复频率限制',
    value: 3,
  },
]);

const powerItem = ref({
  name: '供电单位',
  key: 'powerId',
  funName: 'getByAreaQueryByPower',
  option: {
    name: 'powerName',
    value: 'powerId',
  },
});
const lineItem = ref({
  name: '供电线路',
  key: 'lineId',
  funName: 'getByAreaQueryByLine',
  option: {
    name: 'lineName',
    value: 'lineId',
  },
});
const areaItem = ref({
  name: '台区',
  key: 'areaId',
  funName: 'getByAreaQueryByArea',
  option: {
    name: 'areaName',
    value: 'areaId',
  },
});

const communityItem = ref({
  name: '关联片区/村社',
  key: 'communityId',
  funName: 'getAllCommunity',
  option: {
    name: 'communityName',
    value: 'communityId',
  },
});

const changePower = (val: any) => {
  //线路搜索
  searchParams.value.lineSearch.powerId = val;
  //台区搜索赋值
  searchParams.value.areaSearch.powerId = val;
  searchParams.value.areaSearch.lineId = '';

  //社区搜索赋值
  searchParams.value.communitySearch.powerId = val;
  searchParams.value.communitySearch.lineId = '';
  searchParams.value.communitySearch.areaId = '';

  //公共搜索
  searchParams.value.lineId = '';
  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};
const changeLine = (val: any) => {
  searchParams.value.areaSearch.lineId = val;

  searchParams.value.communitySearch.lineId = val;
  searchParams.value.communitySearch.areaId = '';

  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};

const changeArea = (val: any) => {
  searchParams.value.communitySearch.areaId = val;

  searchParams.value.communityId = '';
};

const item = ref({});
const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const communityList = ref([]);
const getAllCommunity = () => {
  basicConfigService
    .getAllCommunity({
      data: {
        powerId: searchParams.value.powerId,
        lineId: searchParams.value.lineId,
      },
    })
    .then((res) => {
      let data = res.data.map((e) => {
        return {
          label: e.communityName,
          value: e.communityId,
        };
      });
      communityList.value.push(...data);
    });
};

const optionsMange = ref([]);
const getAllManager = () => {
  basicConfigService.getAllManager({ data: {} }).then((res) => {
    optionsMange.value = res.data.map((n) => {
      return {
        label: n.managerName,
        value: n.managerId,
      };
    });
  });
};

onMounted(() => {
  getAllManager();
  getAllCommunity();
});

const handleShowList = (row) => {
  state.dataSource =
    row.managerReplyRecordList && row.managerReplyRecordList.length > 0
      ? JSON.parse(JSON.stringify(row.managerReplyRecordList))
      : [];
  state.visible = true;
};

// const getModalList = async () => {
//   const params = {
//     data: { ...state.modalParams },
//     pageNumber: 1,
//     pageSize: 10,
//   };
//   const res = await basicConfigService.getRobotReply(params);
//   if (res.success) {
//     state.dataSource = res.data;
//   }
// };
// const resetForm = () => {
//   searchParams.value = {
//     wxGroupName: '',
//     lineId: '',
//     powerId: '',
//     areaId: '',
//     communityId: '',
//     griManagerId: '',
//     isWarn: '', // 是否预警
//     warnTypeId: '', // 预警类型
//     isWorkOrder: '', // 是否生成工单
//     isBackDeal: '', // 是否已回复处理
//     recordTimeBegin: null, // 消息发送开始时间
//     recordTimeEnd: null, // 消息发送结束时间
//     isNeedManagerReplay: 1,
//   };
//   handleSearch();
// };

const downLoad = () => {
  basicConfigService
    .managerReplDownload({
      data: {
        ...searchParams.value,
        orderField: sortTablekey.value,
        // isDesc: isDesc.value,
        date: undefined,
      },
    })
    .then((res) => {
      var blob = new Blob([res]);
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '网格经理回复台账.xls');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
};
</script>

<style lang="less" scoped></style>
